.code-box {
	border: 1px solid @site-border-color-split;
	border-radius: @border-radius-sm;
	display: inline-block;
	width: 100%;
	position: relative;
	margin: 0 0 16px;
	transition: all 0.2s;

	p {
		margin: 0;
	}

	&:target {
		border: 1px solid @primary-color;
		z-index: 10;
	}

	&-expand-trigger {
		cursor: pointer;
		font-size: 14px;
		color: #9199ac;
		margin-left: 5px;
		opacity: 0.8;
		transition: all 0.3s;
		top: -2px;
		position: relative;

		&-active {
			color: #3b4357;
		}
	}

	&-title {
    position: absolute;
    top: -14px;
    margin-left: 16px;
    padding: 1px 8px;
    color: #777;
    background: #fff;
    border-radius: @border-radius-sm @border-radius-sm 0 0;
    transition: background-color 0.4s;

		a,
		a:hover {
      color: @site-text-color;
      font-weight: 500;
      font-size: @font-size-base;
		}
	}

  &-description {
    padding: 18px 24px 12px;
  }

	a.edit-button {
    position: absolute;
    top: 7px;
    right: -16px;
    padding-right: 6px;
    font-size: 12px;
    text-decoration: none;
    background: #fff;
    transform: scale(0.9);
	}

	&-demo {
    padding: 42px 24px 50px;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px solid @site-border-color-split;
	}

	iframe {
		width: 100%;
		border: 0;
	}

	&-meta {
		&.markdown {
      position: relative;
      width: 100%;
      font-size: @font-size-base;
      border-radius: 0 0 @border-radius-sm @border-radius-sm;
      transition: background-color 0.4s;
		}

		blockquote {
			margin: 0;
		}

		h4,
		section& p {
			margin: 0;
			width: 98%;
		}

		> p {
      width: 100%;
      margin: 0.5em 0;
      padding-right: 25px;
      font-size: 12px;
      word-break: break-word;
		}
	}

	&.expand &-meta {
		border-radius: 0;
		border-bottom: 1px dashed @site-border-color-split;
	}

	.code-expand-icon {
		> span { display:flex; }

		&-show,
		&-hide {
			transition: all 0.4s;
			max-width: 100%;
			height: 16px;
			width: 16px;
			cursor: pointer;
		}

		&-show {
			opacity: 0.55;
			pointer-events: auto;
			&:hover {
				opacity: 1;
			}
		}

		&-hide {
			pointer-events: none;
			display: none;
		}

		&.ant-tooltip-open .code-expand-icon-show {
			opacity: 1;
		}
	}

	.highlight {
		position: relative;
		&-wrapper {
			display: none;
			overflow: auto;
			border-radius: 0 0 @border-radius-sm @border-radius-sm;
	
			&-expand {
				display: block;
			}
		}
		pre {
			margin: 0;
			padding: 0;
			background: #fff;
		}
		&:not(:first-child) {
			border-top: 1px dashed @site-border-color-split;
		}
	}

	&-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    border-top: 1px dashed @site-border-color-split;
    opacity: .7;
    transition: opacity .3s;

    &:hover {
      opacity: 1;
    }

    nz-tooltip {
      margin-left: 16px;

      &:first-child {
        margin-left: 0;
      }
    }
	}

	&-code-icon {
    color: @site-text-color-secondary;
    cursor: pointer;
		transition: all 0.24s;

    &:hover {
      color: @site-text-color-secondary;
    }
    &.anticon-check {
      color: @green-6 !important;
      font-weight: bold;
    }
	}

	pre {
		margin: 0;
		width: auto;
		code {
			border: none;
			display: block;
			background: #fff;
			color: #314659;
			line-height: 2;
			padding: 16px 32px;
			border-radius: 2px;
			font-size: 14px;
		}
	}
}

.browser-mockup {
	border-top: 2em solid rgba(230, 230, 230, 0.7);
	box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
	position: relative;
	border-radius: 3px 3px 0 0;
    font-size: 14px;
	&:before {
		display: block;
		position: absolute;
		content: "";
		top: -1.25em;
		left: 1em;
		width: 0.5em;
		height: 0.5em;
		border-radius: 50%;
		background-color: #f44;
		box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
	}
	&:after {
		display: block;
		position: absolute;
		content: "";
		top: -2em;
		left: 5.5em;
		width: 20%;
		height: 0;
		border-bottom: 2em solid white;
		border-left: 0.8em solid transparent;
		border-right: 0.8em solid transparent;
    }
    .browser-scroll {
        overflow: auto;
        height: 100%;
    }
}
